<script setup lang="ts">
const issueList = [
  {
    title:'我是标题',
    content: '为什么我总是过分帅气...',
    author:{
      username: 'ec50n9',
      avatar: 'vite.svg'
    }
  },{
    title:'我是标题',
    content: '为什么我总是过分帅气...',
    author:{
      username: 'ec50n9',
      avatar: 'vite.svg'
    }
  },{
    title:'我是标题',
    content: '为什么我总是过分帅气...',
    author:{
      username: 'ec50n9',
      avatar: 'vite.svg'
    }
  },{
    title:'我是标题',
    content: '为什么我总是过分帅气...',
    author:{
      username: 'ec50n9',
      avatar: 'vite.svg'
    }
  }
]
</script>

<template>
  <div class="quiz-list flex flex-col">
    <!--表头-->
    <div>
      <h2>💬 问题列表</h2>
    </div>
    <!--列表项目-->
    <div class="quiz-item flex gap-6 py-6 border-b-2 border-gray-200"
         v-for="(item, i) in issueList" :key="i">
      <img class="w-14 rounded-full ring-4"
           :src="item.author.avatar" alt="头像">
      <div class="flex-grow">
        <div>{{item.content}}</div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>